<template>

	<div style="width: 100%;height: 100%;">
		<div v-if="dlym == false">
			<view v-if="loading">
				<van-loading size="24px" color="#1989fa"
					style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">加载中...</van-loading>
			</view>
			<view v-else>
				<div style="width: 100%;height: 100%;box-sizing: border-box;padding: 20px;">
					<div class="container">
						<div class="box">
							<van-icon name="eye-o" size="20px" />
						</div>
						<div class="box right-box">
							<van-icon name="envelop-o" size="20px" />
						</div>
					</div>

					<div class="container" style="margin: 10px 0;margin-bottom: 30px;">
						<div class="box">
							<div style="font-size: 16px;font-weight: 600;" @click="djdl">登入</div>
						</div>
						<div class="box right-box" @click="djdl">
							<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="40px" />
						</div>
					</div>

					<div class="cd">
						<div>

							<div @click="djdl">
								<div>
									<van-icon name="wap-home-o" size="20px" color="#cfcfcf" />
								</div>
								<div>我的主页</div>
							</div>

							<div @click="ydrl">
								<div>
									<van-icon name="orders-o" size="20px" color="#cfcfcf" />
								</div>
								<div>阅读日历</div>
							</div>

							<div @click="xhdxf">
								<div>
									<van-icon name="like-o" size="20px" color="#cfcfcf" />
								</div>
								<div>喜欢的想法</div>
							</div>

							<div @click="mrtx">
								<div>
									<van-icon name="bulb-o" size="20px" color="#cfcfcf" />
								</div>
								<div>每日提醒</div>
							</div>

							<div @click="sz">
								<div>
									<van-icon name="setting-o" size="20px" color="#cfcfcf"/>
								</div>
								<div>设置</div>
							</div>

						</div>
						<div></div>
					</div>


					<van-tabbar :active="active" @change="onChange">
						<van-tabbar-item icon="home-o">首页</van-tabbar-item>
						<van-tabbar-item icon="smile-comment-o">探索</van-tabbar-item>
						<van-tabbar-item icon="contact">我</van-tabbar-item>
					</van-tabbar>
				</div>

			</view>

		</div>
		<div style="display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; padding: 20px;background-color: white;"
			v-if="dlym">
			<div style="flex: 1; position: relative;">
				<div style="position: absolute; top: 0; right: 0;">
					<van-icon name="cross" size="20px" @click="dlym = false" />
				</div>
				<div
					style="position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);font-size:30px; writing-mode: tb-rl;">
					岛读</div>
			</div>
			<div class="xmhz">
				<div class="top">
					<div class="box" @click='djtzdl'>
						<van-icon name="fire" size="25px" color="#e20909" style="margin-bottom:10px;"/>
						<p>微博登入</p>
					</div>
					<div class="box" @click='djtzdl'>
						<van-icon name="wechat" size="25px" color="#00cb44" style="margin-bottom:10px;"/>
						<p>微信登入</p>
					</div>
					<div class="box" @click='djtzdl'>
						<van-icon name="graphic" size="25px" color="#004fff" style="margin-bottom:10px;"/>
						<p>手机登入</p>
					</div>
				</div>
				<div class="bottom">
					<div class="content">
						<div style="font-size: 16px;color: #d3d3d3;"><van-checkbox value="true" checked-color="#47d46c" icon-size="16px">已经阅读并同意以下条款</van-checkbox></div>
						<div style="font-size: 16px;">《服务条款》 《隐私条款》</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 2,
				loading: true,
				dlym: false
			};
		},
		onLoad() {
			// 模拟获取数据
			setTimeout(() => {
				this.loading = false; // 数据获取成功后，隐藏loading
				// 更新其他数据
			}, 2000);
		},
		methods: {
			mrtx(){
				uni.navigateTo({
					url: '/pages/mrtx/mrtx'
				});
			},
			sz(){
				const loginInfo = uni.getStorageSync('loginInfo');
				if (loginInfo) {
					this.dlym = false
					uni.navigateTo({
						url: '/pages/login/login'
					});
				} else {
					this.dlym = true
				}
			},
			djtzdl(){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			djdl() {
				const loginInfo = uni.getStorageSync('loginInfo');
				if (loginInfo) {
					this.dlym = false
					uni.navigateTo({
						url: '/pages/login/login'
					});
				} else {
					this.dlym = true
				}
			},
			xhdxf() {
				const loginInfo = uni.getStorageSync('loginInfo');
				if (loginInfo) {
					uni.navigateTo({
						url: '/pages/xhym/xhym'
					});
				} else {
					this.dlym = true
				}
			},
			ydrl() {
				uni.navigateTo({
					url: '/pages/xzrq/xzrq'
				});
			},
			onChange(event) {
				// event.detail 的值为当前选中项的索引
				let active = event.detail
				if (active == 0) {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				if (active == 1) {
					uni.navigateTo({
						url: '/pages/index2/index2'
					});
				}
			},
		},
		mounted() {
			let app = getApp();
			console.log(app.globalData.yjms)
		}
	}
</script>

<style lang="less">
	body {
		width: 100%;
		height: 100%;
		background-color: #dfe8e0;
	}

	.container {
		display: flex;

		.box {
			flex: 1;
		}

		.right-box {
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}
	}


	.cd {
		margin-top: 100px;
		width: 95%;
		margin: 0 auto;
		border-radius: 10px;
		background-color: white;
		display: flex;
		box-sizing: border-box;
		padding: 10px;

		>div {
			flex: 1;
		}

		>div:nth-child(1) {
			>div {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 7px;
				margin: 10px 0;

				>div {
					flex: 1;
					display: flex;
					align-items: center;
				}

				>div:nth-child(2) {
					flex: 2;
					font-weight: 600;
					font-size: 14px
				}
			}
		}
	}

	.xmhz {
		flex: 1;
		display: flex;
		flex-direction: column;

		.top {
			flex: 1;
			display: flex;
			justify-content: space-around;
		}

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.bottom {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>
